{% extends 'base.html' %}
    {% block breadcrumb_current %}
        公共参数 > 用户列表
    {% endblock %}
{% block content %}

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            用户列表
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end" style="margin-left: 15px;">返回首页</a>
            {% if user.is_manager %}
            <a href="{% url 'user_add' %}" class="btn btn-secondary btn-sm float-end">新增用户</a></h5>
            {% endif %}
        </div>
    <div>

<div class="container mt-4">
    <!-- 表格展示，初始隐藏 -->
    <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
        <thead>
            <tr>
                <th>账号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>部门</th>
                <th>激活状态</th>
                <th>部门&权限</th>
                <th>激活/暂停</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr class="custom-row-color">
                <td>{{ user.username }}</td>
                <td>{{ user.realname }}</td>
                <td>{{ user.phone_number }}</td>
                <td>{{ user.department }}</td>
                <td>{{ user.is_active|yesno:"激活,暂停使用" }}</td>
                <td><a href="{% url 'user_edit' user.id %}" class="text-decoration-none" style="color: #417690;">编辑调整</a></td>
                <td><a href="{% url 'toggle_user_active' user.id %}" class="text-decoration-none" style="color: #417690;"  onclick="return confirm('确定要修改{{user.username}}的激活状态吗？')">变更</a></td>
                <td><a href="{% url 'reset_password' user.id %}" class="text-decoration-none" style="color: #417690;">重置</a></td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" class="text-center">暂无用户信息</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 卡片展示，初始隐藏 -->
    <div id="mobile-view" style="display: none;">
        {% for user in users %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ user.username }}</h5>
                <p class="card-text">
                    <strong>姓名:</strong> {{ user.realname }}<br>
                    <strong>电话:</strong> {{ user.phone_number }}<br>
                    <strong>部门:</strong> {{ user.department }}<br>
                    <strong>激活状态:</strong> {{ user.is_active|yesno:"激活,暂停使用" }}
                </p>
                <a href="{% url 'user_edit' user.id %}" class="btn btn-primary me-2">
                    编辑调整
                </a>
                <a href="{% url 'toggle_user_active' user.id %}" class="btn btn-secondary me-2" onclick="return confirm('确定要修改{{user.username}}的激活状态吗？')">
                    激活/暂停
                </a>
                <a href="{% url 'reset_password' user.id %}" class="btn btn-secondary">
                    重置密码
                </a>
            </div>
        </div>
        {% empty %}
        <div class="card mb-3">
            <div class="card-body text-center">
                暂无用户信息
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 设备检测脚本 -->
    <script>
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const desktopView = document.getElementById('desktop-view');
            const mobileView = document.getElementById('mobile-view');

            if (isMobile()) {
                mobileView.style.display = 'block';
            } else {
                desktopView.style.display = 'table';
            }
        });
    </script>
</div>
{% endblock %}